<template>
    <el-row class="lives-news">
        <el-row>
            <el-col class="title">
                <h3>店铺管理</h3>
            </el-col>
        </el-row>
        <el-row class="search-row">
            <el-form class="inline-form" :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog()"><i class="el-icon-plus el-icon--left"></i>开店</el-button>
                </el-form-item>
                <el-form-item label="搜索店铺">
                    <el-input placeholder="请输入店铺名称" v-model="params.shopNameLike" />
                </el-form-item>
                <el-form-item label="注册手机号">
                    <el-input placeholder="请输入注册手机号" v-model="params.phoneNum" @blur="searchShop" @keyup.enter.native="searchShop">
                    </el-input>
                </el-form-item>
                <el-form-item label="店铺状态">
                    <el-select v-model="params.shelves" placeholder="请选择店铺状态">
                        <el-option label="全部" value=" " />
                        <el-option label="上架" :value="true" />
                        <el-option label="下架" :value="false" />
                    </el-select>
                </el-form-item>
                <el-form-item label="营业状态">
                    <el-select v-model="params.operatingState" placeholder="请选择营业状态">
                        <el-option label="全部" value=" " />
                        <el-option label="营业中" :value="true" />
                        <el-option label="歇业中" :value="false" />
                    </el-select>
                </el-form-item>
                <el-form-item label="地区">
                    <el-select v-model.number="params.provinceId" placeholder="不限" filterable>
                        <el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model.number="params.cityId" placeholder="不限" filterable>
                        <el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model.number="params.areaId" placeholder="不限" @change="areaChange" filterable>
                        <el-option v-for="(item,index) in areaList" :key="index" :label="item.areaName" :value="item.areaId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="基本资料">
                    <el-select v-model.number="params.base" placeholder="全部"  filterable>
                        <el-option v-for="(item,index) in InfoArr" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="配送信息">
                    <el-select v-model.number="params.delivery" placeholder="全部"  filterable>
                        <el-option v-for="(item,index) in InfoArr" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="资质信息">
                    <el-select v-model.number="params.qualification" placeholder="全部" filterable>
                        <el-option v-for="(item,index) in InfoArr" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="结算信息">
                    <el-select v-model.number="params.settlement" placeholder="全部" filterable>
                        <el-option v-for="(item,index) in InfoArr" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="店铺添加起始时间">
                    <el-date-picker v-model="addDateRange" type="datetimerange" placeholder="选择时间范围" align="right" range-separator="~" @change="selectAddDateRange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchShop">搜索</el-button>
                    <el-button type="danger" @click="resetSearch">重置查询条件</el-button>
                    <el-button type="primary" @click="exportList">导出列表</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-col>
                <el-table :data="shopList" border :row-style="{fontSize: '12px'}">
                    <el-table-column label="ID" align="center">
                        <template slot-scope="scope">{{scope.row.detail.shopId}}</template>
                    </el-table-column>
                    <el-table-column label="名称" align="center">
                        <template slot-scope="scope">{{scope.row.detail.shopName?scope.row.detail.shopName:'-'}}</template>
                    </el-table-column>
                    <el-table-column label="负责人" align="center">
                        <template slot-scope="scope">
                            {{scope.row.detail.name}}<br>
                            ({{scope.row.detail.phoneNum}})
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="LOGO" align="center" width="120px">-->
                    <!--<template slot-scope="scope"><img :src="UPLOADURL + scope.row.detail.logoUrl + '/shopLogo.png'" alt="" class="logo-img"></template>-->
                    <!--</el-table-column>-->
                    <el-table-column label="地址" align="center">
                        <template slot-scope="scope">{{scope.row.detail.provinceName?scope.row.detail.provinceName:''}}
                            {{scope.row.detail.cityName?'-' +scope.row.detail.cityName:''}}
                            {{scope.row.detail.areaName?'-' +scope.row.detail.areaName:''}}<br>
                            {{scope.row.detail.address?scope.row.detail.address:'-'}}</template>
                    </el-table-column>
                    <el-table-column label="营业时间" align="center">
                        <template slot-scope="scope">{{scope.row.detail.busBeginTime?scope.row.detail.busBeginTime:'00:00:00'}} - {{scope.row.detail.busEndTime?scope.row.detail.busEndTime:'00:00:00'}}</template>
                    </el-table-column>
                    <el-table-column label="注册手机号" align="center">
                        <template slot-scope="scope">{{scope.row.detail.phoneNum?scope.row.detail.phoneNum:'-'}}</template>
                    </el-table-column>
                    <el-table-column label="联系电话" align="center">
                        <template slot-scope="scope">{{scope.row.detail.takeOutPhone?scope.row.detail.takeOutPhone:'-'}}</template>
                    </el-table-column>
                    <!--<el-table-column label="营业状态" align="center">-->
                        <!--<template slot-scope="scope">{{scope.row.detail.operatingState?'营业中':'歇业中'}}</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column label="店铺状态" align="center">-->
                        <!--<template slot-scope="scope">{{scope.row.detail.shelves?'上架':'下架'}}</template>-->
                    <!--</el-table-column>-->
                    <el-table-column label="审核状态" align="center">
                        <el-table-column label="基本资料" align="center" width="120px">
                            <template slot-scope="scope">
                                {{formatAuditStatus(scope.row.shopAuditInformation.base)}}<span v-if="scope.row.shopAuditInformation.base == 'UNADOPT' && scope.row.shopAuditInformation.baseId" class="reason" @click="showUnadoptReason(scope.row.shopAuditInformation.baseId)">原因</span>
                                <!--<el-button class="audit-btn" :disabled="scope.row.shopAuditInformation.baseDisabled" size="small"type="primary" @click="getAuditbyId('base', scope.row)">审核</el-button>-->
                                <el-button class="audit-btn" size="small"type="primary" @click="getAuditbyId('base', scope.row)">审核</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="配送信息" align="center" width="220px">
                            <template slot-scope="scope">
                                {{formatAuditStatus(scope.row.shopAuditInformation.delivery)}}<span v-if="scope.row.shopAuditInformation.delivery == 'UNADOPT' && scope.row.shopAuditInformation.deliveryId" class="reason" @click="showUnadoptReason(scope.row.shopAuditInformation.deliveryId)">原因</span><br>
                                <el-button class="audit-btn" size="small" type="primary" disabled @click="getAuditbyId('distribution', scope.row)">审核</el-button>
                                <el-button class="audit-btn" size="small" type="success" @click="commitToDelivery(scope.row)">提交蜂鸟</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="资质信息" align="center" width="120px">
                            <template slot-scope="scope">
                                {{formatAuditStatus(scope.row.shopAuditInformation.qualification)}}<span v-if="scope.row.shopAuditInformation.qualification == 'UNADOPT' && scope.row.shopAuditInformation.qualificationId" class="reason" @click="showUnadoptReason(scope.row.shopAuditInformation.qualificationId)">原因</span>
                                <!--<el-button class="audit-btn" :disabled="scope.row.shopAuditInformation.qualificationDisabled" size="small" type="primary" @click="getAuditbyId('qualification', scope.row)">审核</el-button>-->
                                <el-button class="audit-btn" size="small" type="primary" @click="getAuditbyId('qualification', scope.row)">审核</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="结算信息" align="center" width="120px">
                            <template slot-scope="scope">
                                {{formatAuditStatus(scope.row.shopAuditInformation.settlement)}}<span v-if="scope.row.shopAuditInformation.settlement == 'UNADOPT' && scope.row.shopAuditInformation.settlementId" class="reason" @click="showUnadoptReason(scope.row.shopAuditInformation.settlementId)">原因</span>
                                <!--<el-button class="audit-btn" size="small" type="primary" @click="getAuditbyId('settlement', scope.row)">审核</el-button>-->
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="操作" width="155px" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" @click="updateStore(scope.$index, scope.row)">修改</el-button>
                            <!--<el-button size="small" type="primary" @click="showShopInfo(scope.$index, scope.row)">查看详情</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-dialog :visible.sync="addDialog" size="tiny" @close="closeaddDialog" class="dialog">
                <el-form :model="formInline" label-width="100px">
                    <el-form-item label="手机号">
                        <el-input type="text" v-model="formInline.sellerName" auto-complete="off" placeholder="请输入手机号" :maxlength="11" ></el-input>
                    </el-form-item>
                    <el-form-item label="主体资质">
                        <div class="modal-input">
                            <el-select v-model="formInline.subjectDocument" placeholder="请选择主体资质" class="select">
                                <el-option
                                        v-for="(item,index) in subjectDocumentList"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item label="注册号">
                        <div class="modal-input">
                            <el-input v-model="formInline.regNumber" placeholder="请输入主体资质注册号" ></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input class="verification-input" v-model="formInline.code" placeholder="请输入短信验证码" :maxlength="4"></el-input>
                        <el-button class="get-code" @click="getCode" :disabled="isClickGetCode">获取验证码</el-button>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelAddShop">取 消</el-button>
                    <el-button type="primary" @click="toAddShop" :loading="addLoading">确 定</el-button>
                </div>
            </el-dialog>

            <!--审核不通过原因-->
            <el-dialog title="审核不通过原因" :visible.sync="auditDetail" size="tiny" @close="closeAuditDetail" class="dialog">
                <el-form label-width="120px" v-if="unadoptReason" class="reason-form">
                    <el-form-item label="店铺名称:">
                        <span class="unadopt-text">{{unadoptReason.shopName}}</span>
                    </el-form-item>
                    <el-form-item label="审核类型:">
                        <span class="unadopt-text">{{formatAuditType(unadoptReason.auditType)}}</span>
                    </el-form-item>
                    <el-form-item label="审核人:">
                        <span class="unadopt-text">{{unadoptReason.operatorName}}({{formatAduitorType(unadoptReason.operatorType)}})</span>
                    </el-form-item>
                    <el-form-item label="审核时间:">
                        <span class="unadopt-text">{{moment(unadoptReason.auditTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                    </el-form-item>
                    <el-form-item label="原因:">
                        <span class="unadopt-text">{{unadoptReason.unauditReason?unadoptReason.unauditReason:'未填写'}}</span>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <span class="unadopt-text">{{unadoptReason.auditRemark?unadoptReason.auditRemark:'无'}}</span>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-row>
        <el-row>
            <!-- 分页 -->
            <el-col class="pagination">
                <el-pagination @current-change="currentChange" :current-page="params.pageId" :page-size="params.pageSize" layout="total, prev, pager, next" :total="counts">
                </el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>
<script>
	import {shopAuditList, commitToDelivery, getPhoneCode, addShop, exportShopAuditList, getAuditLogDetail} from '@/api/api';
	import {getProvinceList, getCityList, getDistrictList} from '@/api/region';
	export default {
		data: function() {
			return {
				params: {
					pageId: 1,
					pageSize: 20,
					shopNameLike: null,
					phoneNum: null,
					shelves: null,
					operatingState: null,
					provinceId: null,
					cityId: null,
					areaId: null,
					startAddTime: null,
					endAddTime: null,
					base: null,
					qualification: null,
					settlement: null,
					delivery: null,
				},
				addDateRange: null,
				counts: 0,
				isAdd: true,
				shopList: null,
				provinceList: [],
				cityList: [],
				areaList: [],
				shopId: 0,
				addDialog: false,
				addLoading: false,
				addToperPopup: false,
				formInline: {
					sellerName: null,
					code: null,
					regNumber: null,
					subjectDocument: null
				},
				isClickGetCode: false,
				subjectDocumentList: [{
					label: '营业执照',
					value: 'BUSINESS_LICENSE'
				}, {
					label: '事业单位法人证书',
					value: 'LEGAL_PERSON_CERTIFICATE_OF_INSTITUTION'
				}, {
					label: '民办非企业单位登记证书',
					value: 'REGISTRATION_CERTIFICATE_OF_PRIVATE_NON_ENTERPRISE_UNITS'
				}, {
					label: '社会团体法人登记证书',
					value: 'SOCIAL_ORGANIZATION_LEGAL_PERSON_REGISTRATION_CERTIFICATE'
				}, {
					label: '其他',
					value: 'OTHER'
				}],
				InfoArr: [{
					value: null,
					label: '全部'
				},{
					value: 'UN_COMMIT',
					label: '未提交'
				},{
					value: 'UN_AUDIT',
					label: '未审核'
				},{
					value: 'IN_THE_REVIEW',
					label: '审核中'
				},{
					value: 'ADOPT',
					label: '已通过'
				},{
					value: 'UNADOPT',
					label: '不通过'
				}],
				unadoptReason: null,
				auditDetail: false
			}
		},
		created: function() {
			getProvinceList().then(res => {
				var list = [];
				list.push({
					provinceId: null,
					provinceName: "不限"
				});

				this.provinceList = [].concat(list, res);
			});
			this.params.pageId = parseInt(this.$route.query.pageId) || 1;
			this.params.provinceId = parseInt(this.$route.query.provinceId) || null;
			this.params.cityId = parseInt(this.$route.query.cityId) || null;
			this.params.areaId = parseInt(this.$route.query.areaId) || null;
			this.params.operatingState = this.$route.query.operatingState || null;
			this.params.shelves = this.$route.query.shelves || null;
			this.params.shopNameLike = this.$route.query.shopNameLike || '';
			this.params.startAddTime = this.$route.query.startAddTime || '';
			this.params.endAddTime = this.$route.query.endAddTime || '';
			this.params.startPassAuditTime = this.$route.query.startPassAuditTime || '';
			this.params.endPassAuditTime = this.$route.query.endPassAuditTime || '';
			if(this.params.provinceId){
				getCityList(this.params.provinceId).then(res => {
					this.cityList = res;
					console.log(this.cityList);
				})
			}
			if(this.params.cityId){
				getDistrictList(this.params.cityId).then(res => {
					this.areaList = res;
					console.log(this.areaList);
				})
			}
			this.getShopLists();
		},
		watch: {
			'params.provinceId': function(newVal, oldVal){
				if (newVal == oldVal) {
					return;
				}

				this.params.cityId = null;
				this.params.areaId = null;

				this.cityList = [];
				this.areaList = [];
				if(newVal){
					getCityList(newVal).then(res => {
						var list = [];
						list.push({
							cityId: null,
							cityName: "不限"
						});
						this.cityList = [].concat(list, res);
						console.log(this.cityList);
					})
				}

			},
			'params.cityId': function(newVal, oldVal){
				if (newVal == oldVal) {
					return;
				}

				this.params.areaId = null;

				this.areaList = [];
				if(newVal){
					getDistrictList(newVal).then(res => {
						var list = [];
						list.push({
							areaId: null,
							areaName: "不限"
						});

						this.areaList = [].concat(list, res);

					})

				}
			}
		},
		methods: {
			areaChange: function(value) {
				this.params.areaId = value;
			},
			//获取列表
			getShopLists: function() {
				shopAuditList({ params: this.params }).then(data => {
					var str = '?';
					for (var key in this.params) {
						if (this.params[key]) {
							str += key + '=' + this.params[key] + '&'
						}
					}
					this.$router.push(str);
					console.log(data);
					this.counts = data.count;
					this.shopList = data.list;
//					var len = this.shopList.length;
//					if(len > 0){
//						for(let i =0;i<len;i++){
//
//							//基本信息审核按钮禁用处理
//							if(this.shopList[i].shopAuditInformation.base == 'UN_AUDIT'){
//
//								this.shopList[i].shopAuditInformation.baseDisabled = false;
//							}else{
//								this.shopList[i].shopAuditInformation.baseDisabled = true;
//							}
//
//                            //资质审核按钮禁用处理
//							if(this.shopList[i].shopAuditInformation.qualification == 'UN_AUDIT'){
//
//								this.shopList[i].shopAuditInformation.qualificationDisabled = false;
//							}else{
//								this.shopList[i].shopAuditInformation.qualificationDisabled = true;
//							}
//
//						}
//
//					}
					console.log(this.shopList);

				})
			},
			//搜索
			selectAddDateRange: function(value) {
				if (!value) {
					this.params.startAddTime = null;
					this.params.endAddTime = null;
					this.getShopLists();
					return;
				}
				var dateRange = value.split('~');
				this.params.startAddTime = dateRange[0];
				this.params.endAddTime = dateRange[1];
				this.getShopLists();
			},
			searchShop: function() {
				this.getShopLists();
			},
			resetSearch: function () {
				this.params = {
                    pageId: 1,
                    pageSize: 20,
                    shopNameLike: null,
                    phoneNum: null,
                    shelves: null,
                    operatingState: null,
                    provinceId: null,
                    cityId: null,
                    areaId: null,
                    startAddTime: null,
                    endAddTime: null,
                    base: null,
                    qualification: null,
                    settlement: null,
                    delivery: null,
				};
				this.addDateRange = null;
				this.getShopLists()
			},
			getAuditbyId: function(type,row){
				this.$router.push({path: '/shopInfo',query: {shopId:row.shopId, type: type}});
			},
			showShopInfo: function (index,row) {
				var shopId = row.shopId;
				this.$router.push('shopInfo?shopId=' + shopId);
			},
			updateStore: function (index, row) {
				var shopId = row.shopId;
				this.$router.push('openStore?backUrl=shopAudit&shopId=' + shopId);
			},

			//显示添加弹窗
			showAddDialog: function() {
				this.addDialog = true;
			},
			//关闭添加弹窗
			closeaddDialog: function() {
				this.formInline = {
					sellerName: null,
					code: null,
					regNumber: null,
					subjectDocument: null
				};
				this.addDialog = false;
			},
			//开店
			toAddShop: function() {
				addShop(this.formInline).then(data => {
					console.log(data);
					this.getShopLists();
					this.$message({
						message: '添加成功',
						type: 'success'
					});
					this.addDialog = false;
					this.$router.push('openStore?backUrl=shopAudit&shopId=' + data.shopId);
				})
			},
			//取消添加分类
			cancelAddShop: function() {
				this.addDialog = false;
				this.formInline = {
					sellerName: null,
					code: null,
					regNumber: null,
					subjectDocument: null
				}
			},
			getCode: function(e){
				var _this = this;
				if(this.formInline.sellerName.length == 11){
					getPhoneCode(this.formInline.sellerName).then(()=>{
						_this.isClickGetCode = true;
					})
				}else{
					this.$message({
						type: 'error',
						message: '请输入正确的手机号码'
					})
					return;
				}
				var i = 60;
				var codeInterval = setInterval(function() {
					i--;
					if(i == 0){
						clearInterval(codeInterval)
						_this.isClickGetCode = false;
						e.target.innerText = '获取验证码';
						return;
					}
					e.target.innerText = i + 's后重新获取'
				}, 1000)
			},
			//提交配送审核
			commitToDelivery: function(row){
				if(!row.shopId){
					this.$message({
						message: '店铺id错误',
						type: 'error'
					});
					return;
				}
				commitToDelivery(row.shopId).then(() => {
					this.$message({
						message: '提交成功',
						type: 'success'
					})
				})
			},
			exportList: function () {
				this.$confirm('确定导出数据？','提示').then(() => {
					var element = document.createElement('a');
					var queryString = this.params;
					delete queryString.pageId;
					delete queryString.pageSize;
					var str = '?';
					for(var key in queryString){
						if(queryString[key] != null){
							str += (key + '=' + queryString[key] + '&');
						}
					}
					str += 'token=' + sessionStorage.getItem('jwt');
					str = this.BASEURL + '/agent/openStore/export' + str;
					element.href = str;
					element.click();
					this.$message({
						message: '正在导出...',
						type: 'success',
						duration: 3000
					})
				}).catch(()=>{})
			},
			showUnadoptReason: function(id){
				getAuditLogDetail(id).then(res => {
					console.log(res);
					this.unadoptReason = res;
					this.auditDetail = true;
				})
			},
			closeAuditDetail: function(){
				this.unadoptReason = null;
				this.auditDetail = false;
			},
			currentChange: function(val) {
				this.params.pageId = val;
				this.getShopLists()
			},
			formatAuditStatus: function(auditType){
				switch(auditType){
					case 'UN_COMMIT':
						return '未提交';
					case 'UN_AUDIT':
						return '未审核';
					case 'IN_THE_REVIEW':
						return '审核中';
					case 'ADOPT':
						return '通过';
					case 'UNADOPT':
						return '不通过';
				}
			},
			formatAduitorType: function(type){
				switch(type){
					case 'AGENT':
						return '代理商';
					case 'ADMIN':
						return '管理员';
					case 'SYSTEM':
						return '系统';
				}
			},
			formatAuditType: function(type){
				switch(type){
					case 'BASE':
						return '基本资料';
					case 'QUALIFICATION':
						return '资质信息';
					case 'SETTLEMENT':
						return '结算信息';
					case 'DISTRIBUTION':
						return '配送信息';
					case 'BASE_CHANGE':
						return '基本资料修改';
					case 'QUALIFICATION_CHANGE':
						return '资质信息修改';
					case 'SETTLEMENT_CHANGE':
						return '结算信息修改';
				}
			}

		}
	}
</script>
<style scoped lang="scss">
    .lives-news {
        .title {
            font-size: 12px;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
            h3 {
                display: inline-block;
                padding: 5px 0;
                margin: 0;
                font-weight: normal;
                color: #23b7e5;
                border-bottom: 1px solid #23b7e5;
            }
        }
        .logo-img{
            width: 120px;
        }
        .amap-demo {
            height: 500px;
        }

        .search-box {
            position: absolute;
            top: 25px;
            right: 20px;
        }

        .amap-page-container {
            position: relative;
        }

        .el-table tr .el-button+.el-button{
            margin-left: 0;
        }
        .verification-input{
            width: 50%;
            float: left;
        }
        .get-code {
            float: left;
            margin-left: 10px;
        }
        .el-pagination{
            margin-top: 5px;
        }
        .audit-btn{
            /*display: none;*/
        }
        .reason{
            color: #ff0000;
            text-decoration: underline;
            cursor: pointer;
        }
        .reason-form .el-form-item .el-form-item__label{
            font-weight: bold;
        }
        .reason-form .el-form-item{
            margin-bottom: 0;
        }
        .unadopt-text{
            color: #000;
        }
    }
</style>